<template>
  <div>
    <search></search>
    <!-- 轮播图 -->
    <swiper indicator-dots class="swiper" autoplay interval="2000" duration="500" indicator-active-color="white">
      <block v-for="(item,index) in imgUrls" :key="index">
        <swiper-item>
          <image :src="item.image_src" class="slide-image" />
        </swiper-item>
      </block>
    </swiper>
    <!-- 菜单 -->
    <div class="menu">
      <div class="item-menu" v-for="(item,index) in cateList" :key="index">
        <img :src="item.image_src">
      </div>
    </div>
    <!--楼层 -->

    <div class="floor" v-for="(item,index1) in contentList" :key="index1">
      <!-- 楼层标题 -->
      <div class="floor-title">
        <img :src="item.floor_title.image_src">
      </div>
      <!-- 楼层内容 -->
      <div class="floor-content">
        <div class="left">
          <img :src="item.product_list[0].image_src">
        </div>
        <div class="right">
          <img 
          v-if="subIndex!==0"
          v-for="(subItem,subIndex) in item.product_list" :key="subIndex"
          :src="subItem.image_src" 
          mode="aspectFill" 
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import request from '../../utils/request.js';
import search from '../../components/search';
export default {
  data () {
    return {
      imgUrls:[],
      cateList:[],
      contentList:[]
    }
  },
  components: {
    search
  },
  mounted () {
    // // 轮播图
    // wx.request({
    //   url:"https://itjustfun.cn/api/public/v1/home/swiperdata",
    //   success:res=>{
    //     // console.log(res)
    //     const {data}=res.data
    //     this.imgUrls=data
    //   }
    // })
    // // 分类请求
    // wx.request({
    //   url:"https://itjustfun.cn/api/public/v1/home/catitems",
    //   success:res=>{
    //     const{data}=res.data
    //     console.log(res);
    //     this.cateList=data
    //   }
    // })
    this.getData()
  },
  methods: {
    // 请求页面所有的数据,async异步请求，与await一起使用
    async getData(){
      // try catch具有捕获程序代码错误的作用，代码块错误不会影响到下面代码的执行，具有块级作用域的作用
      // 轮播图
      try{
        const res=await request("https://itjustfun.cn/api/public/v1/home/swiperdata")
        const {data}=res.data
        this.imgUrls=data
      } catch (error) {console.log(error)}

      // 分类
       try{
        const res=await request("https://itjustfun.cn/api/public/v1/home/catitems")
        const {data}=res.data
        this.cateList=data
      } catch (error) {console.log(error)}

      // 楼层
      try{
        const res=await request("https://www.zhengzhicheng.cn/api/public/v1/home/floordata")
        const {message}=res.data
        this.contentList=message
        // console.log(message)
      } catch (error) {console.log(error)}
    }
    
  }
}
</script>

<style scoped lang="scss">
@import './style.scss';

</style>
